import React from 'react'
import {
    Button,
    message,
    Modal
} from 'antd'
import Table from '../../components/Table'
import { FormModal } from '../../components/ModalForm'
import { DATATATUS } from '../../utils/system-data'
import 'whatwg-fetch'
import API from '../../axios/api'
import SetPermModalForm from './set-perm'


require('es6-promise').polyfill();

const confirm = Modal.confirm


let columns = [
    { dataIndex: 'RoleName', title: '角色名称', width: 200,},
    { dataIndex: 'RoleDescribe', title: '角色描述', width: 200,},
]

class Role extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            tData: [],
            item: {},
            loading: true,
            modalShow: false,
            modalShowEdit: false,
            modalShowSetPerm: false,
            treeData: [],
        }
    }

    // 获取表格数据
    fetchTableData =  async () => {
        let params = {}
        await API.fetchRoles(params).then((res) => {
            if(res.Code === 200) {
                this.setState({
                    tData: res.Data
                    
                });
            }
            this.setState({
                loading: false
            });
        })
    }

    initMenuTree =  async () => {
        await API.fetchRolePermission().then((res) => {
            if(res.Code === 200) {
                console.log(res.Data)
                this.setState({
                    treeData: res.Data,
                });
            }
        })
    }

    initRoles =  async () => {
        let params = {}
        await API.fetchRoles(params).then((res) => {
            if(res.Code === 200) {
                this.setState({
                    roleArr: res.Data
                });
            }
        })
    }

    componentWillMount() {
        this.fetchTableData()
    }

    componentDidMount() {
        this.initMenuTree()
        this.initRoles()
    }

    add = () =>{
        this.setState({
            modalShow: true
        })
    }

    onOk = (param) =>{
        API.editRole(param).then(res =>{
            if(res.Code === 200)
            {
                message.success('添加成功')
                this.onCancel()
                this.fetchTableData()
            }
            else message.error(res.Message)
        })
    }

    onCancel = () =>{
        this.setState({
            modalShow: false
        })
    }

    setRolePermission = () =>{
        this.setState({
            modalShowSetPerm: true
        })
    }

    onOkSetPerm = (param) =>{
        API.editRolePermission(param).then(res =>{
            if(res.Code === 200)
            {
                message.success('设置成功')
                this.onCancelSetPerm()
            }
            else message.error(res.Message)
        })
    }
    onCancelSetPerm = () =>{
        this.setState({
            modalShowSetPerm: false
        })
    }

    tableAction = async (actionKey, item) => {
        if (actionKey === 'edit') {
            this.setState({
                item: item,
                roleId: item.Id,
                modalShowSetPerm: true
            })
        } else if (actionKey === 'delete') {
            confirm({
                title: '提示',
                content: '确定删除吗',
                onOk: () => {
                    this.handerDel(item, DATATATUS.DELETE).then(res => {
                        if(res.Code === 200) {
                            message.success('删除成功')
                            this.fetchTableData()
                        }
                        else message.error(res.Message)
                    })
                },
                onCancel() {}
            })
        }
    }

    handerDel(item, status){
        return API.delRole({Id: item.Id, Status: status})
    }

    fields = () => {
        return [{
            label: '角色名称',
            type: 'input',
            name: 'RoleName',
            options: {
                rules: [{
                    required: true,
                    message: '角色名称必填!',
                }]
            }
        }, {
            label: '角色描述',
            type: 'input',
            name: 'RoleDescribe'
        }, ]
    }

    render() {
        return (
            <div id="wrap">
                <div style={{ paddingTop: 10 }}>
                    <Button type="primary" onClick={this.add} >添加</Button>&nbsp;
                    <Button  type="primary" onClick={this.setRolePermission}>分配权限</Button>
                </div>
                <div className="tableBox">
                    <div style={{ paddingTop: 10 }}>
                        <Table
                            onCtrlClick={ this.tableAction }
                            pagination={ false }
                            header={ columns }
                            data={ this.state.tData }
                            loading={ this.state.loading }
                            action={row => [
                                { key: 'delete', name: '删除', color: 'red', icon: 'delete'}
                            ]}
                            scroll={{y: 385 }}


                        />
                    </div>
                </div>
                <SetPermModalForm
                    modalKey="setPerm"
                    visible={this.state.modalShowSetPerm}
                    title="设置权限"
                    onOk={this.onOkSetPerm}
                    onCancel={this.onCancelSetPerm}
                    okText="保存"
                    roleId={this.state.roleId}
                    roles={this.state.roleArr}
                    treeData={this.state.treeData}
                />
                <FormModal
                    modalKey="add"
                    visible={this.state.modalShow}
                    title="添加"
                    fields={this.fields()}
                    onOk={this.onOk}
                    onCancel={this.onCancel}
                    okText="保存"
                />
            </div>
        )
    }
}

export default  Role
